<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        body {
            background: url(../images/29.jpg)no-repeat;
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            border-radius: 10px;
            width: 480px;
            height: 530px;
            padding: 40px 32px;
            background: rgb(250, 250, 250);
        }

        .content header {
            font-weight: 800;
            font-size: 20px;
            font-family: 'Montserrat', sans-serif;
            margin: 15px 0 45px 0;
        }

        .user input,
        .pass input {
            width: 380px;
            height: 55px;
            padding-left: 15px;
            border-radius: 5px;
            border: grey solid 1px;
        }

        .login input {
            width: 380px;
            height: 55px;
            border-radius: 5px;
            background: #f9b300;
            border: none;
            font-size: 20px;
            font-weight: 500;
        }

        .user,
        .pass,
        .login {
            padding-bottom: 38px;
        }

        .table {
            margin-top: -25px;
        }

        .table ul li:nth-child(1) {
            margin-left: -70%;
        }

        .table ul li:nth-child(2) {
            margin-top: -5%;
            margin-left: 75%;
        }

        .other {
            margin-top: 5px;
            color: rgb(150, 150, 150);
        }

        /* .other ul li {
            display: inline;
            list-style-type: none;
        } */

        .other .left {
            position: relative;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 2px;
            background: rgb(209, 209, 209);
        }

        .other .right {
            position: relative;
            top: -10px;
            left: 300px;
            width: 100px;
            height: 2px;
            background: rgb(209, 209, 209);
        }

        .icon {
            margin-top: -27px;
        }

        svg {
            width: 70px;
            padding: 0 10px;
        }

        .signup {
            margin-top: -40PX;
            font-size: 16PX;
            font-weight: 500;
            color: #FFF;
        }

        .signup a {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="content">
        <header>用户登录</header>
        <form action="#">
            <div class="field user">
                <input type="text" required placeholder="手机号/用户名/邮箱">
            </div>
            <div class="field pass">
                <input type="password" class="password" required placeholder="密码">
            </div>
            <div class="field login">
                <input type="submit" value="登录">
            </div>
            <div class="field table">
                <ul>
                    <li><input type="checkbox">记住密码</li>
                    <li>忘记密码？</li>
                </ul>
            </div>
            <div class="other">
                <ul>
                    <li class="left"></li>
                    <li class="other">使用第三方登录</li>
                    <li class="right"></li>
                </ul>
            </div>
            <div class="icon">
                <svg t="1632224453809" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2610" width="200" height="200">
                    <path
                        d="M512 0.90112C229.45792 0.90112 0 228.43392 0 510.976 0 793.53856 229.45792 1021.1328 512 1021.1328A509.05088 509.05088 0 0 0 1022.09536 510.976 509.05088 509.05088 0 0 0 512 0.90112z m-91.01312 629.5552c-26.56256 0-49.31584-5.67296-75.85792-11.3664l-75.85792 37.92896 22.75328-66.3552C237.03552 552.69376 204.8 503.3984 204.8 442.71616c0-104.30464 98.6112-185.83552 218.07104-185.83552 108.09344 0 201.0112 64.47104 219.9552 153.6-7.5776 0-13.25056-1.90464-20.84864-1.90464-104.28416 0-185.83552 77.74208-185.83552 172.56448 0 15.1552 1.90464 30.35136 7.5776 45.50656-7.5776 3.80928-15.1552 3.80928-22.7328 3.80928z m322.3552 77.76256l17.08032 54.9888-58.7776-34.14016c-22.77376 5.69344-43.6224 11.38688-66.37568 11.38688-104.30464 0-185.856-70.16448-185.856-157.3888 0-87.2448 81.55136-159.29344 185.856-159.29344 98.59072 0 185.83552 70.16448 185.83552 159.29344 0 47.4112-32.23552 91.01312-77.76256 125.1328z"
                        fill="#46BB36" p-id="2611"></path>
                    <path
                        d="M318.58688 378.2656c0 17.05984 13.27104 30.33088 30.33088 30.33088 17.05984 0 30.35136-13.27104 30.35136-30.33088 0-17.08032-13.29152-30.35136-30.35136-30.35136s-30.33088 13.27104-30.33088 30.35136z m235.13088 159.27296c0 13.29152 11.38688 24.65792 24.65792 24.65792 13.27104 0 24.63744-11.3664 24.63744-24.65792 0-13.27104-11.3664-24.63744-24.63744-24.63744-13.27104-1.90464-24.65792 9.48224-24.65792 24.63744z m-81.53088-159.27296c0 17.05984 13.27104 30.33088 30.33088 30.33088 17.05984 0 30.35136-13.27104 30.35136-30.33088 0-17.08032-13.29152-30.35136-30.35136-30.35136s-30.33088 13.27104-30.33088 30.35136z m202.89536 159.29344c0 13.27104 11.3664 24.63744 24.65792 24.63744 13.27104 0 24.63744-11.3664 24.63744-24.63744 0-13.29152-11.3664-24.65792-24.63744-24.65792-13.29152-1.90464-24.65792 9.48224-24.65792 24.65792z"
                        fill="#46BB36" p-id="2612"></path>
                </svg>
                <svg t="1632224606729" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4737" width="200" height="200">
                    <path
                        d="M512 0C229.004 0 0 229.004 0 512s229.004 512 512 512 512-229.004 512-512S794.996 0 512 0z m210.385 641.396c-7.447 9.31-26.996-1.861-41.89-32.581-3.724 13.963-13.033 36.305-34.444 64.232 35.374 8.378 44.684 42.822 33.513 61.44-8.379 13.033-26.997 24.204-59.579 24.204-58.647 0-83.781-15.826-95.883-26.996-1.862-2.793-5.586-3.724-10.24-3.724-4.655 0-7.447 0.93-10.24 3.724-11.171 11.17-37.237 26.996-95.884 26.996-32.582 0-52.13-11.171-59.578-24.204-12.102-18.618-1.862-53.062 33.513-61.44-20.48-27.927-29.79-50.269-34.444-64.232-13.964 30.72-34.444 42.821-41.89 32.581-5.586-8.378-8.379-26.065-7.448-38.167 3.724-46.545 34.444-85.644 53.062-106.124-2.793-5.585-8.378-40.029 14.894-63.301v-1.862c0-92.16 65.164-158.255 148.015-158.255 81.92 0 148.014 66.095 148.014 158.255v1.862c23.273 23.272 17.688 57.716 14.895 63.301 17.687 20.48 49.338 59.579 53.062 106.124 0.93 12.102-0.931 29.79-7.448 38.167z"
                        fill="#30A5DD" p-id="4738"></path>
                </svg>
                <svg t="1632224637802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6867" width="200" height="200">
                    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF4731" p-id="6868">
                    </path>
                    <path
                        d="M672.069818 503.32703c-26.779152-5.15103-13.761939-19.456-13.761939-19.456s26.205091-42.852848-5.182061-74.022788c-38.896485-38.570667-133.430303 4.918303-133.430303 4.918303-36.103758 11.108848-26.546424-5.073455-21.441939-32.581818 0-32.457697-11.217455-87.396848-107.395879-54.939151s-178.579394 146.928485-178.579394 146.928485c-57.406061 76.024242-49.772606 134.671515-49.772606 134.671515 14.320485 129.598061 153.11903 165.189818 261.057939 173.614545 113.586424 8.843636 266.860606-38.787879 313.406061-136.797091s-37.965576-136.967758-64.837818-142.289454z m-240.081454 242.532849c-112.748606 5.244121-203.869091-50.874182-203.869091-125.533091s91.136-134.671515 203.869091-139.822546S636.121212 521.464242 636.121212 596.061091s-91.306667 144.709818-204.132848 149.798788z m-22.481455-216.126061a105.658182 105.658182 0 0 0-100.289939 118.551273 58.042182 58.042182 0 0 0 30.394182 50.362182 132.173576 132.173576 0 0 0 169.115151-30.161455c34.536727-44.218182 14.258424-151.846788-99.29697-138.767515z m-28.594424 147.921455a30.890667 30.890667 0 0 1-38.229333-27.229091 40.339394 40.339394 0 0 1 36.336484-37.996606c24.327758-2.296242 40.137697 11.589818 40.137697 29.184a40.835879 40.835879 0 0 1-38.260363 36.057212z m66.839273-56.521697a13.187879 13.187879 0 0 1-19.781819-1.784243 16.492606 16.492606 0 0 1 4.794182-21.441939 13.777455 13.777455 0 0 1 20.914424 1.815273 17.423515 17.423515 0 0 1-5.926787 21.410909zM727.288242 457.69697a18.40097 18.40097 0 0 0 18.214788-15.515152 7.292121 7.292121 0 0 0 0.232728-1.954909c13.85503-123.547152-102.027636-102.275879-102.027637-102.275879a18.478545 18.478545 0 1 0 0 36.957091c83.223273-18.245818 64.868848 64.341333 64.868849 64.341334a18.525091 18.525091 0 0 0 18.711272 18.385454z m-13.513697-215.660606a233.223758 233.223758 0 0 0-92.811636 0.915394c-0.899879 0.093091-1.737697 0.915394-2.56 1.08606a1.101576 1.101576 0 0 0-0.636121 0.48097 26.903273 26.903273 0 0 0 7.323151 52.751515 130.094545 130.094545 0 0 0 24.467394-5.771636 142.848 142.848 0 0 1 134.004364 65.768727 119.032242 119.032242 0 0 1 8.316121 89.05697 78.599758 78.599758 0 0 0-5.352727 25.848242 24.684606 24.684606 0 0 0 26.934303 24.110546c12.412121 0 22.915879-1.691152 25.987879-22.590061h0.170666c44.249212-146.369939-54.147879-215.117576-125.843394-231.734303z"
                        fill="#FFFFFF" p-id="6869"></path>
                </svg>
            </div>
        </form>
        <div class="signup">没有账号？<a href="#">注册</a></div>
    </div>
</body>


</html>